<template>
    <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
        <div slot="title">
            <h4 style="margin-bottom: 0;font-weight: bold;">
                <el-tag v-if="talent_message.talent.intelligent" type="success">认证达人</el-tag>
                <el-tag v-else style="font-weight: normal;">达人详情</el-tag>
                {{talent_message.talent.account_name}}
                <el-button v-if="talent_message.talent.status === -1" @click="$refs.talentVerifyDialog.init(talent_message.talent)">{{talent_message.talent.status_name}}</el-button>
                <el-button v-if="talent_message.talent.status === 0" type="primary" @click="$refs.talentVerifyDialog.init(talent_message.talent)">{{talent_message.talent.status_name}}</el-button>
                <el-button v-if="talent_message.talent.status === 1" type="success" @click="$refs.talentVerifyDialog.init(talent_message.talent)">{{talent_message.talent.status_name}}</el-button>
                <el-button v-if="talent_message.talent.status === 2" type="warning" @click="$refs.talentVerifyDialog.init(talent_message.talent)">{{talent_message.talent.status_name}}</el-button>
                <el-button v-if="talent_message.talent.status === 3" type="danger" @click="$refs.talentVerifyDialog.init(talent_message.talent)">{{talent_message.talent.status_name}}</el-button>
            </h4>
        </div>
        <div class="detail_form">
            <el-card shadow="hover" v-loading="loading">
                <div slot="header">
                    <span style="font-weight: bold;">达人信息</span>
                </div>
                <el-form label-width="120px">
                    <el-form-item label="会员编号">{{talent_message.talent.talent_id}}</el-form-item>
                    <el-form-item label="达人等级">{{talent_message.talent.channel_name}}</el-form-item>
                    <el-form-item label="账号昵称">{{talent_message.talent.account_name}}</el-form-item>
                    <el-form-item label="手机号">{{talent_message.user.phone}}</el-form-item>
                    <el-form-item label="申请时间">{{talent_message.talent.apply_time}}</el-form-item>
                    <el-form-item label="认证时间">{{talent_message.talent.verify_time}}</el-form-item>
                    <el-form-item label="微信名称">{{talent_message.user.nickname}}</el-form-item>
                    <el-form-item label="openid">{{talent_message.user.openid}}</el-form-item>
                    <el-form-item label="认证备注" v-if="talent_message.talent.remark">{{talent_message.talent.remark}}</el-form-item>
                    <el-form-item label="认证照片" v-if="talent_message.talent.verify_img">
                        <el-image style="width: 100px; height: 100px"
                                  :src="talent_message.talent.verify_img"
                                  :preview-src-list="[talent_message.talent.verify_img]"
                                  fit="contain"></el-image>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover" v-if="talent_message.works.length">
                <div slot="header">
                    <span style="font-weight: bold;">工单信息</span>
                </div>
                <el-table :data="talent_message.works" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="work_no" label="工单号">
                        <template slot-scope="scope">
                            <el-button type="text" @click="$refs.workDetail.init(scope.row.work_id)">{{scope.row.work_no}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="receive_time" label="接单时间"></el-table-column>
                    <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
                    <el-table-column prop="status_name" label="工单状态"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover" v-if="talent_message.lottery.length">
                <div slot="header">
                    <span style="font-weight: bold;">霸王餐</span>
                </div>
                <el-table :data="talent_message.lottery" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="goods_name" label="活动名称"></el-table-column>
                    <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
                    <el-table-column prop="created_at" label="参与时间"></el-table-column>
                    <el-table-column prop="published" label="中奖状态"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover" :body-style="{padding:0}">
                <div slot="header">
                    <span style="font-weight: bold;">认证日志</span>
                </div>
                <div style="margin-top: 25px">
                    <el-timeline v-loading="loading">
                        <el-timeline-item
                                v-for="(item, index) in talent_message.logs"
                                :key="index"
                                :timestamp="item.created_at">
                            {{item.remark}}
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </el-card>
        </div>
        <work-detail-dialog ref="workDetail" @refresh="refresh"></work-detail-dialog>
        <talent-verify-dialog ref="talentVerifyDialog" @refresh="refresh"></talent-verify-dialog>
    </el-drawer>
</template>

<script>
    import WorkDetailDialog from "./WorkDetailDialog";
    import TalentVerifyDialog from "./TalentVerifyDialog";
    export default {
        name: "TalentDetailDialog",
        components:{
            WorkDetailDialog,
            TalentVerifyDialog,
        },
        data(){
            return {
                show:false,
                loading:false,
                talent_id:0,
                talent_message:{
                    talent:{
                        verify_img:'',
                    },
                    lottery:[],
                    logs:[],
                    user:{},
                    works:[],
                },
                submitting:false,
            }
        },
        methods:{
            init(talent_id){
                this.submitting = false;
                this.show = true;
                this.talent_id = talent_id;
                this.loadData();
            },
            loadData(){
                this.loading = true;
                this.post('/api/laifei/talent/detail',{talent_id:this.talent_id}).then(result=>{
                    if(result.code === 0){
                        this.talent_message = result.data;
                        this.loading = false;
                    }
                })
            },
            refresh(){
                this.loadData();
                this.$emit('refresh');
            }
        }
    }
</script>

<style scoped>
    .submit_form>div{
        flex: 0 0 100%;
    }
</style>
<style>
    .detail_form{
        padding: 0 10px;
    }
    .detail_form .el-card{
        margin-bottom: 10px;
    }
    .detail_form .el-form-item{
        margin-bottom: 0;
    }
    .detail_form .el-form{
        display: flex;
        flex-wrap: wrap;
    }
    .detail_form .el-form-item{
        flex: 0 0 33%;
    }
    .detail_form .el-card__header{
        padding: 8px 20px;
    }
    .box-card {
        width: 100%;
    }
</style>
